<template>
	<view class="tabs">
		<view  v-for="(item,index) in tabs" :key="item.id" @click="handleClick(index)" :class="['tabs-item',{active:item.isActive}]">
			{{item.text}}
		</view>
	</view>
</template>

<script>
	export default {
		name:"tabs",
		props:{
			tabs:{
				type:Array,
				value:[]
			}
		},
		created:function(){
			// console.log(this.tabs);
		},
		data() {
			return {

			};
		},
		methods:{
			handleClick:function(index){
			// console.log(index);
				let tabs = JSON.parse(JSON.stringify(this.tabs));
				// 将原生tabs里面内容 的 isActive 值改成false
				tabs.map(v=>v.isActive = false)
				tabs[index].isActive = true;
				// 触发自定义事件，回传tabs
				this.$emit("mytab",tabs);
			}
		}
	}
</script>

<style lang="scss" scoped>
.tabs{
	height: 88rpx;
	display: flex;
	border-bottom: 1rpx solid #ddd;
	.tabs-item{
		flex:1;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.active{
		border-bottom: 2rpx solid #eb4450;
	}
}
</style>
